<template>
	<view class="music-menu-item" @click="handleClick(itemId)">
		<view class="top">
			<image :src="imageUrl" mode="widthFix"></image>
			<view class="counter">{{formatPlayCount}}</view>
		</view>
		<view class="bottom">{{desc}}</view>
	</view>
</template>

<script>
	import { formatCounter } from '../../util/format.js'
	
	export default {
		props: {
			imageUrl:{
				type: String
			},
			playCount: {
				type: Number
			},
			desc: {
				type: String
			},
			itemId: {
				type:Number
			}
		},
		computed: {
			formatPlayCount() {
				return formatCounter(this.playCount)
			}
		},
		methods: {
			handleClick(id) {
				uni.navigateTo({
					url:'../../pages/song_detail/song_detail_menu?id='+id
				})
			}
		}
	}
</script>

<style scoped>
	.music-menu-item {
		display: inline-block;
		vertical-align: top;
		width: 220rpx;
		margin: 0 10rpx;
	}
	.top {
		position: relative;
		
	}
	.top image {
		width: 100%;
		border-radius: 5px;
	}
	.top .counter {
		width: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		position: absolute;
		bottom: 8rpx;
		left: 5rpx;
		font-size: 20rpx;
		color: #fff;
	}
	.bottom {
		width: 100%;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -moz-box;
		-moz-line-clamp: 2;
		-moz-box-orient: vertical;
		word-wrap: break-word;
		word-break: break-all;
		white-space: normal;
		overflow: hidden;
	}
</style>
